<template>
	<view class="postPage">
		<u-navbar title="发帖" :fixed="true" :bgColor="'#ffffff'" :placeholder="true"
			:titleStyle="{ color: '#333', fontSize: '16px', }" @leftClick="navigatorMe"></u-navbar>
		<view class="tabcont">
			<view v-for="(tab, index) in list1" :key="index" :class="['tab-item', { active: currentId === index }]"
				@click="handleClick(index)">
				{{ tab.name }}
				<view class="line" v-show="currentId === index"></view>
			</view>
		</view>
		<!-- <u-tabs :list="list1" @click="handleClick" :scrollable="false"></u-tabs> -->
		<view v-if="currentId == 0">
			<publishHouse :type="1"></publishHouse>
		</view>

		<view v-if="currentId == 1">
			<publishNotice :type="1"></publishNotice>
		</view>
		<view v-if="currentId == 2">
			<publishShop :type="1"></publishShop>
		</view>
	</view>
</template>
<script>
import publishNotice from "@/pages/publish/publish-notice.vue";
import publishShop from "@/pages/publish/publish-shop.vue";
import publishHouse from "@/pages/publish/publish-house.vue";
export default {
	components: {
		publishShop,
		publishNotice,
		publishHouse,
	},
	data() {
		return {
			tabs: [{
				title: "Tab 1",
				content: "这是 Tab 1 的内容"
			},
			{
				title: "Tab 2",
				content: "这是 Tab 2 的内容"
			},
			{
				title: "Tab 3",
				content: "这是 Tab 3 的内容"
			},
			],
			currentId: 0,
			currentTab: 0,
			list1: [{
				name: "房屋转租",
			},
			{
				name: "便民广告",
			},
			{
				name: "商家优惠",
			},
			],
		};
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			let a = 0
			this.$Api.chat.getUserUnReadNumber().then(res => {
				a = res.data.data
				this.$Api.chat.getUserToUserUnReadNumber().then(res => {
					a = a + res.data.data
					if (a > 0) {
						uni.setTabBarBadge({
							index: 3, // TabBar的索引
							text: a + '' // 显示的数字
						});
					} else {
						uni.removeTabBarBadge({
							index: 3, // TabBar的索引
						});
					}
				})
			})
		}
	},
	methods: {
		navigatorMe() {
			uni.switchTab({
				url: "/pages/mine/mine"
			})
		},
		handleClick(item) {
			console.log("item", item);
			this.currentId = item;
		},
	},
};
</script>
<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px;
	/* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding-top: 30px;
}

.tabcont {
	display: flex;
}

.line {
	width: 32rpx;
	height: 6rpx;
	background: #0079ff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.3);
	border-radius: 4rpx;
	margin-left: 66rpx;
	margin-top: 5rpx;
}

.tab-item {
	flex: 1;
	padding: 10px 20px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	text-align: center;
}

.tab-item.active {
	// border-bottom-color: #0095f8; /* 选中状态的下划线颜色 */
	color: #0095f8;
	/* 选中状态的文字颜色 */
	font-weight: bold;
}

.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
}

.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
</style>